 <template>
  <div>
    <a-card :bordered="false">
      <a-tabs :default-active-key="0" @change="handleChangeTab">
        <a-tab-pane :key="0" tab="待审批">
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange"
          >
            <span slot="fileNameList" slot-scope="text, record">
              <a-button size="small" type="link" icon="" @click="handleLookFile(record)">查看</a-button>
            </span>
            <span slot="action" slot-scope="text, record">
              <a-button size="small" type="link" icon="view" @click="handleDetail(record, '详情')">查看</a-button>
            </span>
            <span slot="audit" slot-scope="text, record">
              <a-popconfirm title="确定通过计划?" ok-text="确认" cancel-text="取消" @confirm="handleConfirm(2, record)">
                <a>通过</a>
              </a-popconfirm>
              <a-divider type="vertical" />

              <!-- <a-popconfirm title="确定驳回计划?" ok-text="确认" cancel-text="取消" @confirm="handleConfirm(3, record)"> -->
              <a @click="openAuditModel(record)">驳回</a>
              <!-- </a-popconfirm> -->
              <!-- <a-radio-group
                :options="plainOptions"
                :default-value="record.status"
                @change="
                  (a) => {
                    handleSwitchChange(a, record)
                  }
                "
              /> -->
              <!-- <a-switch
                checked-children="通过"
                un-checked-children="不通过"
                @click="
                  (a) => {
                    handleSwitchChange(a, record)
                  }
                "
              /> -->
            </span>
          </a-table>
          <!-- table区域-end -->
        </a-tab-pane>
        <a-tab-pane :key="1" tab="已审批" force-render>
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns2"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange"
          >
            <span slot="fileNameList" slot-scope="text, record">
              <a-button size="small" type="link" icon="" @click="handleLookFile(record)">查看</a-button>
            </span>
            <span slot="action" slot-scope="text, record">
              <!-- @click="handleDetail(record, '详情') -->
              <a-button size="small" type="link" icon="view" @click="handleDetail(record, '详情')">查看</a-button>
            </span>
            <span slot="opinion" slot-scope="text, record">
              <span v-if="text == '通过'">{{ text }}</span>
              <a v-else @click="handleLookAudit(record, '审批详情')">驳回(查看原因)</a>
            </span>
          </a-table>
          <!-- table区域-end -->
        </a-tab-pane>
      </a-tabs>

      <create-plan ref="modalForm"></create-plan>
      <FileModel ref="fileModel"></FileModel>
      <create ref="creatModel" @ok="handleAuditOK"></create>
      <CheckAndEditModel ref="auditView"></CheckAndEditModel>
    </a-card>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import columns from './indexColumns'
import columns2 from './columns'
import { getAction, postAction } from '@/api/manage'
import createPlan from '../jh/createPlan.vue'
import FileModel from '../jh/components/FileModel.vue'
import create from './create.vue'
import CheckAndEditModel from './CheckAndEditModel.vue'

export default {
  name: 'sp',
  mixins: [JeecgListMixin],
  components: { createPlan, FileModel, create, CheckAndEditModel },
  data() {
    return {
      // 表头
      columns: columns(this),
      columns2: columns2(this),
      url: {
        list: '/incon/inconReviewPlan/queryAuditPlan',
        audit: '/incon/inconReviewPlan/auditReject',
      },
      dataSource: [],
      loading: false,
      queryParam: {
        auditFlag: 0,
      },
      plainOptions: [
        { label: '未通过', value: '3' },
        { label: '已通过', value: '2' },
      ],
    }
  },
  computed: {},
  mounted() {
    // this.handleChangeTab(0)
    // this.$nextTick(() => {
    // })
  },
  methods: {
    handleLookAudit(record, name) {
      this.$refs.auditView.check(record)
      this.$refs.auditView.title = name
      // this.$refs.modalForm.disableSubmit = true
    },
    handleAuditOK(params) {
      postAction(this.url.audit, params).then((res) => {
        if (+res.code !== 200) {
          this.$message.error(res.message)
        } else {
          this.$message.success(res.message)
          this.getTableData(0)
        }
      })
    },
    openAuditModel(record) {
      if (record) {
        this.$refs.creatModel.rowData = record
      }
      this.$refs.creatModel.visible = true
    },
    handleConfirm(type, row) {
      this.handleSwitchChange(type, row)
    },
    handleChangeTab(evt) {
      console.log('handleChangeTab', evt)
      window['refs'] = this.$refs
      this.queryParam.auditFlag = evt
      // this.getTableData(evt)
      this.loadData()
    },
    async getTableData(status) {
      const data = await getAction(`${this.url.list}?auditFlag=${status}`)
      this.dataSource = data.result.records
      // if (+data.code !== 200) {
      //   this.$message.error(data.message)
      // } else {
      //   this.$message.success(data.message)
      //   this.dataSource = data.result.records
      // }
    },
    handleSwitchChange(e, row) {
      let shenhe = e == '2' ? `/incon/inconReviewPlan/auditPass` : `/incon/inconReviewPlan/auditReject`
      postAction(shenhe, { id: row.id }).then((res) => {
        if (+res.code !== 200) {
          this.$message.error(res.message)
        } else {
          this.$message.success(res.message)
        }
        this.getTableData(0)
      })
    },
    handleLookFile(record) {
      // this.getFileList(record)
      // this.$refs.fileModel.visible = true
      this.$refs.fileModel.look(record, 'yearPlan')
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>